<template>
  <div class="contianer">  
    <div :class="['nav',btnState?'active':'']">
      <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
    </div>
    <el-button :class="['btn_all',btnState?'active':'']" type="primary" icon="el-icon-s-unfold" @click="changeState">{{btnState ? "收回":"全部"}}</el-button>
    <div class="main">
      <router-view/>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data(){
    return {
      btnState:false,
      data: [{
          label: '线图',
          children: [{
            label: '基础线',
            path:'line_basic'
          },{
            label: '多线图',
            path:'line_multiple'
          },{
            label: '不同形态的线图',
            path:'line_shape'
          },{
            label: '不同动画的线图',
            path:'line_animate'
          },{
            label: '路径图',
            path:'line_path'
          },{
            label:'计算回归曲线',
            path:'line_back'
          },{
            label:'分段线和点线标注',
            path:'line_describe'
          }]
        },{
          label: '柱状图',
          children: [{
            label: 'basic',
            path:'bar_basic'
          },{
            label: '多列柱状图',
            path:'bar_multipleX'
          },
          {
            label:"不同形状的柱状图",
            path:'bar_shape'
          },
          {
            label: '不同激活效果的柱状图',
            path:'bar_active'
          },{
            label: '条件颜色与数据label描述',
            path:'bar_describe'
          },{
            label: '堆叠柱状图',
            path:'bar_stack'
          },{
            label: '条形图单列',
            path:'bar_basicY'
          },{
            label: '条形图多列',
            path:'bar_multipleY'
          },{
            label:'蚊香图',
            path:'bar_polar'
          }]
        },{
          label: '点图',
          children: [{
            label: 'basic',
            path:'point_basic'
          },{
            label: '不同形状的点图',
            path:'point_shape'
          },{
            label: '散列点',
            path:'point_jitter'
          },{
            label: '气泡图',
            path:'point_bubble'
          }]  
        },{
          label:'面积图',
          children:[{
            label:'basic',
            path:'area_basic'
          },{
            label:'不同形态的面积图',
            path:'area_shape'
          },{
            label:'多区域堆叠图',
            path:'area_multiple'
          },{
            label:'区间面积图',
            path:'area_section'
          }]
        },{
          label:'饼图',
          children:[{
            label:'basic',
            path:'pie_basic'
          },{
            label:'不同数据标签',
            path:'pie_label'
          },{
            label:'不同激活效果',
            path:'pie_active'
          },{
            label:'设置饼图角度',
            path:'pie_angle'
          },{
            label:'环形图',
            path:'pie_annular'
          },{
            label:'玫瑰图',
            path:'pie_coxcomb'
          },{
            label:'多层饼图',
            path:'pie_multiple'
          }]
        },{
          label:'雷达图',
          children:[{
            label:'basic',
            path:'radar_basic'
          }]
        },{
          label:'漏斗图',
          children:[{
            label:'basic',
            path:'funnel_basic'
          },{
            label:'pyramid',
            path:'funnel_pyramid'
          }]
        },{
          label:'色块图',
          children:[{
            label:'basic',
            path:'block_basic'
          },{
            label:'六边形分箱',
            path:'block_hexagon'
          }]
        },{
          label:'箱型图',
          children:[{
            label:'basic',
            path:'box_basic'
          }]
        },{
          label:'K线图',
          children:[{
            label:'basic',
            path:'candle_basic'
          },{
            label:'携带柱状图',
            path:'candle_candleBar'
          }]
        },{
          label:'地图',
          children:[{
            label:'世界地图',
            path:'map_world'
          },{
            label:'中国地图',
            path:'map_china'
          },{
            label:'世界地图(分类)',
            path:'map_world_type'
          },{
            label:'中国地图(分类)',
            path:'map_china_type'
          }]
        },{
          label:'分面',
          children:[{
            label:'基本分面',
            path:'facet_basic'
          },{
            label:'多类图分面',
            path:'facet_multiple'
          }]
        },{
          label:'关系图',
          children:[{
            label:'矩形关系图',
            path:'relational_basic'
          }]
        },{
          label:'自定义功能',
          children:[{
            label:'自定义图形',
            path:'custom_shape'
          }]
        }],
        defaultProps:{
          children: 'children',
          label: 'label'
        }
    }
  },
  methods:{
    handleNodeClick(e){
      if(this.$route.name == e.path) return
      if(e.path){
        this.$router.push({name:e.path});
      }
    },
    // 修改按钮状态
    changeState(){
      this.btnState = !this.btnState;
    } 
  }
}
</script>

<style lang="scss" scoped>
 @media screen and (max-width: 75rem/*no*/) { 
   .btn_all{
    transform: translateX(0%) !important;
    display: inline-block !important;
   }
   .nav{
     transform: translateX(-100%);
   }
   .main{
     padding-left: 0px !important;
   }
 }
  .contianer{
    width:100%;
    height: 100vh;
    // min-width: 980px;
    .btn_all{
      position: fixed;
      left: 0px;
      top: 0px;
      transition: all ease-in-out .4s;
      display: none;
      &.active{
        transform: translateX(225px)!important;
      }
    }
    .nav{
      width: 225px;
      height: 100%;
      background-color: #EEEEEE;
      position: fixed;
      left: 0;
      top: 0;
      transition: all ease-in-out .4s;
      &.active{
        transform: translateX(0)!important;
      }
      z-index: 10;
    }
    .main{
      width: 100%;
      padding-left: 225px;
      box-sizing: border-box;
      overflow: hidden;
    }
  }
</style>
